{% extends "admin/base.html" %}
{% block ext_css %}

{% endblock %}
{% block content %}
    <ol class="breadcrumb">
        <li><a href="#">后台</a></li>
        <li class="active">概况</li>
    </ol>
    <hr/>
    <div class=" row">
        <div class="col-md-3 col-sm-3 col-xs-6 nav-">
            <a data-toggle="tooltip" class="well top-block " href="{{ url_for('admin.users') }}">
                <i class="glyphicon glyphicon-user blue"></i>
                <h4>总用户数 </h4>
                <span class="badge bg-red">{{ user_all }}</span>
            </a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-6">
            <a data-toggle="tooltip" class="well top-block" href="/admin/article">
                <i class="glyphicon glyphicon-book blue"></i>
                <h4>总文章数</h4>
                <span class="badge bg-red">{{ article_all }}</span>
            </a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-6">
            <a data-toggle="tooltip" class="well top-block" href="#">
                <i class="glyphicon glyphicon-eye-open bg-blue"></i>
                <h4>总访问量 </h4>
                <span class="badge bg-red">{{ visit_all }}</span>
            </a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-6">
            <a data-toggle="tooltip" class="well top-block" href="{{ url_for('admin.article') }}">
                <i class="glyphicon glyphicon-time blue"></i>
                <h4>本月文章 </h4>
                <span class="badge bg-red">{{ article_month }}</span>
            </a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-6">
            <a data-trigger="confirm" class="well top-block" href=" url_for('visit_statistics') }}">
                <i class="glyphicon glyphicon-time blue"></i>
                <h4>评论总数 </h4>
            </a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-6">
            <a data-trigger="confirm" class="well top-block" href=" url_for('visit_statistics') }}">
                <i class="glyphicon glyphicon-time blue"></i>
                <h4>评论总数 </h4>
            </a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-6">
            <a data-trigger="confirm" class="well top-block" href=" url_for('visit_statistics') }}">
                <i class="glyphicon glyphicon-time blue"></i>
                <h4>评论总数 </h4>
            </a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-6">
            <a data-trigger="confirm" class="well top-block" href=" url_for('visit_statistics') }}">
                <i class="glyphicon glyphicon-time blue"></i>
                <h4>评论总数 </h4>
            </a>
        </div>
        <div class="" id="cpu" style="height:350px"></div>
    </div>
{% endblock %}
{% block script %}
    <script type="text/javascript"
            src="{{ url_for('static', filename='ext/echarts-2.1.8/build/dist/echarts-all.js') }}"></script>
    <script type="text/javascript">
        //访问量
        var Cpu = echarts.init(document.getElementById('cpu'));
        Cpu.showLoading({text: '读取中……'});
        var timeTicket1;
        $.ajax({
            url: '{{ url_for('api.server_info',type='all') }}',
            type: "get",
            async: true,
            dataType: "json",
            success: function (data) {
                Cpu.hideLoading();
                setupcpu(data);
            }
        });
        function setupcpu(data) {
            cpuoption = {
                title: {
                    text: '服务器状态一览',
                    x: 'center'
                },
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [
                    {
                        name: 'CPU使用率',
                        type: 'gauge',
                        center: ['10%', '70%'],
                        splitNumber: 10,       // 分割段数，默认为5
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                                width: 8
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber: 10,   // 每份split细分多少段
                            length: 12,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            show: true,        // 默认显示，属性show控制显示与否
                            length: 30,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width: 5
                        },
                        title: {
                            show: true,
                            offsetCenter: [0, '-40%'],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder'
                            }
                        },
                        detail: {
                            formatter: '{value}%',
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto',
                                fontWeight: 'bolder'
                            }
                        },
                        data: [{value: data.cpu.usage, name: 'CPU使用率'}]
                    },
                    {
                        name: '内存使用率',
                        type: 'gauge',
                        center: ['36.66%', '70%'],
                        splitNumber: 10,       // 分割段数，默认为5
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                                width: 8
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber: 10,   // 每份split细分多少段
                            length: 12,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            show: true,        // 默认显示，属性show控制显示与否
                            length: 30,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width: 5
                        },
                        title: {
                            show: true,
                            offsetCenter: [0, '-40%'],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder'
                            }
                        },
                        detail: {
                            formatter: '{value}%',
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto',
                                fontWeight: 'bolder'
                            }
                        },
                        data: [{value: data.mem.usage, name: '内存使用率'}]
                    },
                    {
                        name: '下载速率',
                        type: 'gauge',
                        min: 0,
                        max: 1000,
                        center: ['63.33%', '70%'],
                        splitNumber: 10,       // 分割段数，默认为5
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                                width: 8
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber: 10,   // 每份split细分多少段
                            length: 12,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            show: true,        // 默认显示，属性show控制显示与否
                            length: 30,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width: 5
                        },
                        title: {
                            show: true,
                            offsetCenter: [0, '-40%'],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder'
                            }
                        },
                        detail: {
                            formatter: '{value}',
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto',
                                fontWeight: 'bolder'
                            }
                        },
                        data: [{value: data.net.recv, name: '下载速率(' + data.net.recv_unit + '/S)'}]
                    },
                    {
                        name: '上传速率',
                        type: 'gauge',
                        min: 0,
                        max: 1000,
                        center: ['90%', '70%'],
                        splitNumber: 10,       // 分割段数，默认为5
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                                width: 8
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber: 10,   // 每份split细分多少段
                            length: 12,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            show: true,        // 默认显示，属性show控制显示与否
                            length: 30,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width: 5
                        },
                        title: {
                            show: true,
                            offsetCenter: [0, '-40%'],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder'
                            }
                        },
                        detail: {
                            formatter: '{value}',
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto',
                                fontWeight: 'bolder'
                            }
                        },
                        data: [{value: data.net.sent, name: '上传速率(' + data.net.sent_unit + '/S)'}]
                    }
                ]
            };
            Cpu.setOption(cpuoption);
            clearInterval(timeTicket1);
            timeTicket1 = setInterval(function () {
                a = $.ajax({
                    url: '{{ url_for('api.server_info',type='all') }}',
                    type: "get",
                    async: true,
                    dataType: "json",
                    success: function (data) {
                        Cpu.hideLoading();
                        cpuoption.series[0].data[0].value = data.cpu.usage;
                        cpuoption.series[1].data[0].value = data.mem.usage;
                        cpuoption.series[2].data[0].value = data.net.recv;
                        cpuoption.series[3].data[0].value = data.net.sent;
                    }
                });
                Cpu.setOption(cpuoption, true);
            }, 3000);
        }
    </script>
{% endblock %}